<template>
  <div class="healthCareNextDetail-container">
    <div>
      <div class="column" style="background:#f6f9ff">
        <div class="left">
          <span>是否仍有以下症状:</span>
        </div>
        <div class="tip">1</div>
      </div>
      <div class="old-diease">
        <div v-for="item in old_symptom" :key="item.value" class="item">
          <div class="left">{{ item.symptom_name }}:</div>
          <div class="right">
            <babyRadio
              :margin-right="5"
              another-style
              :res-val.sync="item.result"
              :items.sync="item.items"
            ></babyRadio>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in question" :key="item.id" class="column">
        <div class="left">
          <span>{{ item.question_name }}</span>
        </div>
        <div class="right">
          <babyRadio
            :margin-right="5"
            another-style
            :res-val.sync="item.result"
            :items.sync="item.answer"
          ></babyRadio>
        </div>
        <div class="tip">{{ index + 2 }}</div>
      </div>
      <div class="column">
        <div class="left">
          <span>是否需要更换保健项目？</span>
        </div>
        <div class="right">
          <babyRadio
            :margin-right="10"
            :res-val.sync="form.isNewHealth"
            :items.sync="newHealth"
          ></babyRadio>
        </div>
        <div class="tip">{{ question.length + 2 }}</div>
      </div>
      <div v-show="form.isNewHealth === 1" class="xzz-container">
        <babyRadio
          :margin-right="5"
          another-style
          :res-val.sync="form.disease_id"
          :items.sync="disease_list"
          :margin-bottom="20"
          :fix-width="200"
        ></babyRadio>
      </div>
      <div class="column">
        <div class="left">
          <span>是否有新症状出现？</span>
        </div>
        <div class="right">
          <babyRadio
            :margin-right="10"
            :res-val.sync="form.isNewDis"
            :items.sync="newDis"
          ></babyRadio>
        </div>
        <div class="tip">{{ question.length + 3 }}</div>
      </div>
      <div v-show="form.isNewDis === 1" class="next-container">
        <div
          v-for="(item, index) in other_symptom"
          :key="index"
          class="column2"
        >
          <div class="title">{{ item.value }}</div>
          <babyMutipul
            :margin-right="100"
            :items.sync="item.data"
            :margin-bottom="8"
            style="flex:1"
          ></babyMutipul>
        </div>
      </div>
    </div>
    <babySubmitBtn :top="300" @click.native="submit">提交</babySubmitBtn>
  </div>
</template>
<script>
import babyRadio from '@/components/common/babyRadio/babyRadio';
import babySubmitBtn from '@/components/common/babySubmitBtn/babySubmitBtn';
import babyMutipul from '@/components/common/babyMutipul/babyMutipul';

export default {
  components: {
    babyRadio,
    babySubmitBtn,
    babyMutipul
  },
  props: {
    id: {}
  },
  data() {
    return {
      newDis: [{label: '否', value: 2}, {label: '是', value: 1}],
      newHealth: [{label: '否', value: 2}, {label: '是', value: 1}],
      form: {
        isNewDis: 2,
        isNewHealth: 2,
        disease_id: 9
      },
      question: [],
      old_symptom: [],
      other_symptom: [],
      disease_list: []
    };
  },
  watch: {
    id: {
      handler(v) {
        if (v) {
          this.getData();
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    getData() {
      this.$http
        .post(this.$url.feedBack, {
          u_id: this.id
        })
        .then(res => {
          res.question.forEach(it => {
            it.answer = it.answer.map(it => ({
              label: it.answer,
              value: it.id
            }));
            it.result = '';
          });
          this.question = res.question;
          this.old_symptom = Object.keys(res.old_symptom).reduce((a, b) => {
            res.old_symptom[b].data.forEach(it => {
              //   it.label = it.symptom_name;
              //   it.value = it.id;
              it.result = '';
              it.items = [
                {label: '消失', value: 1},
                {label: '减轻', value: 2},
                {label: '不变', value: 3},
                {label: '加重', value: 4}
              ];
            });
            return a.concat(res.old_symptom[b].data);
          }, []);
          this.other_symptom = Object.keys(res.other_symptom).map(it => {
            res.other_symptom[it].data.forEach(item => {
              item.label = item.symptom_name;
              item.value = item.id;
            });
            return res.other_symptom[it];
          });
          res.disease_list.forEach(it => {
            it.label = it.disease_name;
            it.value = it.id;
          });
          this.disease_list = res.disease_list;
        })
        .catch(this.$catch);
    },
    toogle(item, it, oit) {},
    submit() {
      const params = {
        u_id: this.id
      };
      //   if (this.form.isNewHealth === 1) {
      params.disease_id = this.form.disease_id;
      //   }
      if (this.form.isNewDis === 1) {
        const symptom_id_arr = this.other_symptom.reduce((a, b) => {
          return a.concat(b.data.filter(it => it.active));
        }, []);
        params.symptom_id = symptom_id_arr.map(it => it.id);
      }
      params.question = this.question.map(it => {
        const o = {};
        o[it.id] = it.result;
        return o;
      });
      params.change = this.old_symptom.map(it => ({
        id: it.id,
        change: it.result
      }));
      this.$http
        .post(this.$url.saveFeedBack, params)
        .then(res => {
          this.$emit('next', res, 2);
        })
        .catch(this.$catch);
    }
  }
};
</script>
<style lang="scss" scoped>
.healthCareNextDetail-container {
  font-size: 16px;
  color: #333;
  .column {
    margin-top: 10px;
    position: relative;
    display: flex;
    align-items: center;
    height: 80px;
    background-color: #fff;
    padding-left: 50px;
    box-sizing: border-box;
    .left {
      width: 300px;
    }
    .right {
      font-size: 16px;
      flex: 1;
    }
    .tip {
      position: absolute;
      font-size: 13px;
      width: 30px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      top: 50%;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      left: 0;
      transform: translateY(-50%);
      color: #fff;
      background-color: #4b90ff;
    }
  }
  .old-diease {
    background: #f6f9ff;
    .item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      //   padding-left: 80px;
      margin-bottom: 10px;
      .left {
        width: 170px;
        padding-left: 100px;
        padding-right: 50px;
        color: #333;
        text-align: right;
        margin-right: 30px;
      }
      .right {
        flex: 1;
      }
    }
  }
  .xzz-container {
    margin-top: 10px;
    padding: 20px 0 0 54px;
    background-color: #f6f9ff;
  }
}
.next-container {
  background-color: #fff;
  padding: 0px 0px 8px 0px;
  margin-top: 10px;
  .column2 {
    background-color: #f2f6ff;
    display: flex;
    align-items: center;
    min-height: 50px;
    margin-bottom: 8px;
    font-size: 16px;
    padding-top: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      position: relative;
      width: 300px;
      margin-top: -8px;
      box-sizing: border-box;
      color: #4b90ff;
      padding-left: 200px;
      font-size: 16px;
      font-weight: bold;
      .require {
        position: absolute;
        left: 2px;
        top: -4px;
        color: #dd331d;
      }
      .big-tip {
        color: #fff;
        background-color: red;
        padding: 5px 20px;
        border-radius: 5px;
        margin-left: 5px;
      }
    }
  }
}
</style>
<style lang="scss">
.healthCareNextDetail-container {
  .column2 {
    .babyMutipul-container {
      .item {
        border: 1px solid #827d7d;
        color: #827d7d;
        &.active {
          color: #fff;
          border: 1px solid #ffb03e;
        }
      }
    }
  }
}
</style>
